<template>
    <div class="header flexbox flexbetween flexcenter">
        <div class="hd_logo flexbox flexcenter">
            <img src="../../assets/img/logo.png" alt="">
            <img src="../../assets/img/menu_btn.svg" @click="isOpenNav" alt="" style="margin-left:20px;cursor: pointer;">
            <el-breadcrumb style="margin-left:20px">
                <template  v-for="(item,index) in $route.meta.crumbArr">
                    <el-breadcrumb-item @click.native="goBack" v-if="$route.meta.crumbArr.length>1 && index==0" :key="index">{{item}}</el-breadcrumb-item>
                    <el-breadcrumb-item :key="index" v-else>{{item}}</el-breadcrumb-item>
                </template>
            </el-breadcrumb>
        </div>
        <div class="hd_head">
            <el-dropdown>
                <div class="flexbox flexcenter">
                    <div class="header_icon">{{userinfo.nickname | keepOneNumS}}</div>
                    <div class="header_text">{{userinfo.nickname}}</div>
                    <i class="el-icon-caret-bottom"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
                    <el-dropdown-item @click.native='exitAdmin'>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            isCollapse: false,
            userinfo: "",
        };
    },
    created() {
        let userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
        this.userinfo = userinfo;
    },
    methods: {
        isOpenNav() {
            this.isCollapse = !this.isCollapse;
            this.$bus.emit("isOpenNav", this.isCollapse);
        },

        // 返回
        goBack(){
            this.$router.go(-1)
        },

        // 退出系统
        exitAdmin() {
            this.$router.replace("/login");
            window.localStorage.removeItem("token");
            window.localStorage.removeItem("userinfo");
        },
    },
};
</script>


<style scoped>
.header {
    height: 60px;
    background-color: #fff;
    box-shadow: 0px 4px 4px rgba(221, 221, 221, 0.3);
    padding-right: 24px;
}
.header_icon {
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #4475ff;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
}
.header_text {
    font-size: 14px;
    color: #17233d;
    margin-right: 8px;
    margin-left: 12px;
}

</style>
<style>
.el-breadcrumb__item:first-child .el-breadcrumb__inner{
    cursor: pointer;
    color: #17233d;
}
.el-breadcrumb__item:first-child .el-breadcrumb__inner:hover{
    color: #4475ff;
}
</style>

